<!-- 景区活动页面 -->
<style scoped>
/* 顶部返回 */
body {
    width: 100%;
    height: 100vh;
    /* overflow-y: hidden; */
}

.head-left div {
    background-color: rgba(153, 153, 153, 1);
    width: 1px;
    height: 2.5vh;
}

.head {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    padding-bottom: 6.5px;
    padding-top: 6.5px;
    height: 28px;
    position: fixed;
    top: 0;
    z-index: 12;
}

.head-text {
    font-size: 13px;
    color: rgba(80, 80, 80, 1);
}

.head-left img {
    width: 3vh;
    height: 3vh;
}

.head-left {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 3vh;
    height: 25px;
    width: 10vh;
    border: 1px solid #e2e2e2;
}

.head-div {
    padding-left: 2vh;
    width: 51%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 九宫格 */
.grid-container {
    width: 72%;
    left: 13.8%;
    height: 280px;
    position: absolute;
    top: 301px;
}

.grid-container img {
    width: 45px;
    height: 40px;
    margin-bottom: 5px;
}

.grid-item {
    width: 80px;
    height: 80px;
    display: flex;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.grid-item.active {
    background-color: #f00;
    color: #fff;
}

/* 九宫格 */
#item1 {
    position: absolute;
    left: 0;
    top: 0;
}

#item2 {
    position: absolute;
    top: 0;
    left: 36%;
}

#item3 {
    position: absolute;
    top: 0;
    right: 0;
}

#item4 {
    position: absolute;
    right: 0;
    top: 36%;
}

#item5 {
    position: absolute;
    bottom: 0;
    right: 0;
}

#item6 {
    position: absolute;
    bottom: 0;
    left: 36%;
}

#item7 {
    position: absolute;
    left: 0;
    bottom: 0;
}

#item8 {
    position: absolute;
    left: 0;
    top: 36%;
}

/* 中奖列表 */
#body_bottom {
    width: 94%;
    padding: 0 3%;
    height: 30px;
    position: absolute;
    top: 621px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #505050;
}

#body_bottom img {
    width: 18px;
    height: 18px;
}

#body_bottom>div {
    display: flex;
}

/* 中奖记录 */
#table {
    width: 84%;
    height: 250px;
    position: absolute;
    top: 718px;
    left: 7%;
    font-size: 13px;
    color: #505050;
}

.table_top {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.table_bottom {
    height: 220px;
    width: 100%;
    overflow: auto;
}

#boxmax {
    width: 100%;
}

.table_bottom_child {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
}

.table_bottom_child>div {
    width: 25%;
    text-align: center;
}

.center {
    width: 100%;
    height: auto;
    overflow-y: hidden;
}
#left {
    width: 40px;
    height: 31px;
    background-color: black;
    position: fixed;
    top: 595px;
    left: 141px;
    z-index: 9999999;
    visibility: hidden;
}
#right {
    width: 40px;
    height: 31px;
    background-color: black;
    position: fixed;
    top: 595px;
    left: 210px;
    z-index: 9999999;
    visibility: hidden; 
}
</style>

<template>
    <div>
        <!-- 顶部 -->
        <div class="head">
            <div class="head-div">
                <div class="head-left">
                    <img src="../assets/tpleft.svg" alt="" @click="previous" />
                    <div></div>
                    <img src="../assets/tpright.svg" alt="" @click="homes" />
                </div>
                <div class="head-text">活动</div>
            </div>
        </div>
        <!-- 抽奖区域 -->
        <div class="grid-container">
            <div class="grid-item" id="item1"><img class="image" :src="`https://wwz.jingyi.icu${jackpot_img[0].img}`"
                    alt="" />
                <p>{{ jackpot_img[0].name }}</p>  
            </div>
            <div class="grid-item" id="item2"><img class="image" :src="`https://wwz.jingyi.icu${jackpot_img[1].img}`"
                    alt="" />
                <p>{{ jackpot_img[1].name }}</p>
            </div>
            <div class="grid-item" id="item3"><img class="image" :src="`https://wwz.jingyi.icu${jackpot_img[2].img}`"
                    alt="" />
                <p>{{ jackpot_img[2].name }}</p>
            </div>
            <div class="grid-item" id="item4"><img class="image" :src="`https://wwz.jingyi.icu${jackpot_img[3].img}`"
                    alt="" />
                <p>{{ jackpot_img[3].name }}</p>
            </div>
            <div class="grid-item" id="item5"><img class="image" :src="`https://wwz.jingyi.icu${jackpot_img[4].img}`"
                    alt="" />
                <p>{{ jackpot_img[4].name }} </p>
            </div>
            <div class="grid-item" id="item6"><img class="image" :src="`https://wwz.jingyi.icu${jackpot_img[5].img}`"
                    alt="" />
                <p>{{ jackpot_img[5].name }}</p>
            </div>
            <div class="grid-item" id="item7"><img class="image" :src="`https://wwz.jingyi.icu${jackpot_img[6].img}`"
                    alt="" />
                <p>{{ jackpot_img[6].name }}</p>
            </div>
            <div class="grid-item" id="item8"><img class="image" :src="`https://wwz.jingyi.icu${jackpot_img[7].img}`"
                    alt="" />
                <p>{{ jackpot_img[7].name }}</p>
            </div>
            <!-- <div class="grid-item" id="item9">9</div> -->
        </div>
        <!-- 中间 -->
        <img src="../assets/img17704218ad045b198.png" class="center" alt="" />
        <div id="box">
            <div id="left" @click="stopLottery"></div>
            <div id="right" @click="button"></div>
        </div>
        <div id="table">
            <div class="table_top">
                <div>序号</div>
                <div>昵称</div>
                <div>奖品</div>
                <div>时间</div>
            </div>
            <!-- 获奖记录 -->
            <div class="table_bottom">
                <div id="boxmax">
                    <div class="table_bottom_child" v-for="(item, index) in jackpot_list" :key="item.id">
                        <div>{{ item.id }}</div>
                        <div>{{ item.nickname }}</div>
                        <div>{{ item.name }}</div>
                        <div>{{ item.create_time }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { NoticeBar } from "vant";
import { useRouter, useRoute } from "vue-router";
import { jackpot, active_list } from "../api/Lotto";
const router = useRouter();
const route = useRoute();
let useinfo = JSON.parse(sessionStorage.getItem('useinfo'))
console.log(useinfo.id);
console.log(route.query.id);
let isRunning = false;
let intervalId;
var num = 400;
let a;
let suiji
// 中奖记录接口
const jackpot_list = ref([])
jackpot({
    user_id: useinfo.id
}).then(res => {
    console.log(res, '中奖记录');
    jackpot_list.value = res.data;
    console.log(jackpot_list.value, '123');
})
// 渲染九宫格图片
const jackpot_img = ref([])
active_list({
    scenic_id: route.query.id
}).then(res => {
    console.log(res, '渲染九宫格数据');
    jackpot_img.value = res.data;
})
// 开始按钮
function button() {
    console.log(123);
    a = 1
    if (isRunning) return;
    isRunning = true;
    // 随机数向下取整x7(最低下标为0,最高为7)
    suiji = Math.ceil(Math.random() * 7)
    intervalId = setInterval(rotateItem, num); // 每50毫秒切换一个格子  
}
// 停止按钮
function stopLottery() {
    console.log(789);
    if (num < 200) {
        if (!isRunning) return;
        a = 2;
        isRunning = false;
        clearInterval(intervalId);
        highlightWinner();
    }
}

// 返回上一页
const previous = () => {
    router.push({
        name: "home",
    });
}
// 返回首页
const homes = () => {
    router.push({
        name: "home",
    });
}

</script>
